import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";

export function energyProportion(
  selector: string,
  value: number,
  barColor: string
) {
  const chart = echarts.init(document.querySelector(selector) as HTMLElement);
  const option = {
    // title: [{
    //     text: '118',
    //     // x: '50%',
    //     // y: '46%',
    //     textAlign: 'center',
    //     textStyle: {
    //         fontSize: '40',
    //         fontWeight: '100',
    //         color: '#D7E9F9',
    //         textAlign: 'center',
    //     },
    // }],
    polar: {
      radius: ["85%", "73%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        startAngle: 90,
        roundCap: false,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: "#43607a75",
        },
        data: [value],
        coordinateSystem: "polar",
        itemStyle: {
          normal: {
            color: barColor,
          },
        },
      },
    ],
  };

  chart.setOption(option);
}

export async function pmsFn() {
  const res = await axios.post("http://localhost:8080/x2");
  const data = res.data.data
  const chart = echarts.init(document.getElementById("mbzjgjcs") as HTMLElement);

  chart.setOption(
    {
      legend: {
        show: false,
        x: "center",
        y: 0,
        icon: "stack",
        itemWidth: 12,
        itemHeight: 6,
        itemGap: 50,
        textStyle: {
          color: "#D8DBDF",
          fontSize: 22
        },
        data: [
          "设备在线率",
          "设备在线数",
        ],
      },
      grid: {
        left: 0,
        right: 0,
        bottom: '3%',
        containLabel: true
      },
      // 设置颜色
      color: ['#EBFF7F', new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#62FDCF' // 渐变起始颜色
      },
        {
          offset: 1,
          color: '#43C8F6' // 渐变结束颜色
        }
      ])],
      // x轴数据
      xAxis: {
        type: 'category',
        data: data.names,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#384267",
          },
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // y轴数据
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        axisLabel: {
          fontSize: 18,
          color: '#D8DBDF'
        }
      },
      // 折线图
      series: [{
        name: '设备在线率',
        type: 'line',
        smooth: true, // 平滑曲线
        data: data.values,
        lineStyle: {
          width: 4
        }
      }, {
        name: '设备在线数',
        type: 'bar',
        barWidth: '16', // 柱子宽度
        data: data.values,
      }]
    },true
  );
}

export async function wuziFn() {
  const res = await axios.post("http://localhost:8080/x5");
  const data = res.data.data
  const chart = echarts.init(document.getElementById('ldbdxfqs') as HTMLElement);
  chart.setOption(
      {
        legend: {
          show: true,
          x: "center",
          y: 0,
          icon: "stack",
          itemWidth: 12,
          itemHeight: 6,
          itemGap: 50,
          textStyle: {
            color: "#D8DBDF",
            fontSize: 22
          },
          data: [
            "流量异常数",
            // "补丁安装数",
          ],
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: 24,
          }
        },
        grid: {
          left: 0,
          right: 0,
          bottom: '3%',
          containLabel: true
        },
        // 设置颜色
        color: ['#3CFFDF', new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#355FF2' // 渐变起始颜色
        },
          {
            offset: 1,
            color: '#43C8F6' // 渐变结束颜色
          }
        ])],
        // x轴数据
        xAxis: {
          type: 'category',
          data: [
            "2023-12",
            "2024-01",
            "2024-02",
            "2024-03",
            "2024-04"
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#384267",
            },
          },
          axisLabel: {
            fontSize: 18,
            color: '#D8DBDF'
          }
        },
        // y轴数据
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed',
            },
            show: true,
          },
          axisLabel: {
            fontSize: 18,
            color: '#D8DBDF'
          }
        },
        // 折线图
        series: [
          //   {
          // name: '发现补丁',
          // type: 'line',
          // smooth: true, // 平滑曲线
          // data: [120, 155, 101, 134, 90, 230, 210],
          // lineStyle: {
          //   width: 4
          // }
          // },
          {
            name: '流量异常数',
            type: 'bar',
            barWidth: '16', // 柱子宽度
            data: data.values
          }
        ]
      },true
  );
}

export async function jingtaiFn() {
  //展示数据
  let optionData:any[] = [];
  //扇形图颜色数据
  const colorList = [
    { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
    { color1: 'rgba(165,123,98,0.9)', color2: 'rgba(254,178,128,1)' },
    { color1: 'rgba(134,109,188,0.9)', color2: 'rgba(180,143,241,1)' }
  ];
  //请求的数据
  let resultData: any[] = [];
  let sum = 0;

  const res = await axios.post("http://localhost:8080/x1");
  const data = res.data.data
  data.dtos.forEach((item:any)=>{
    sum += item.value;
  })

  data.dtos.forEach((item:any)=>{
    resultData.push({
      name: item.name,
      value: item.value,
      percent: (item.value / sum * 100).toFixed(2)
    })
  })

  const chart = echarts.init(document.getElementById("jingtai") as HTMLElement);
  resultData.forEach(item => {
    optionData.push({ value: item.value, name: item.name });
    optionData.push({ name: '', value: sum / 100, itemStyle: { color: 'transparent' } });
  })
  const option = {
    //你的代码
    legend: [
      {
        orient: 'vertical',
        right: '1%',
        top: '1%',
        itemGap: 30,
        textStyle: {
          color: '#ffffff',
          fontSize: 12,
          rich: {
            name: {
              fontSize: 30,
            },
            value: {
              fontSize: 30,
              padding: [0, 0, 0, 50]
            },
            percent: {
              fontSize: 30,
            },
          },
        },
        data: resultData,
        formatter: (name:any) => {
          if (resultData.length) {
            const item = resultData.filter((item) => item.name === name)[0];
            return `{name|${name}}{value| ${item.percent}%}{value| ${item.value}次}`;
          }
        },
      },
    ],
    tooltip: {
      trigger: 'item',
      textStyle:{
        fontSize: 34,
      },
      formatter(params:any) {
        let res = '';
        const { marker, name, value } = params;
        if (name !== '') {
          res += `${marker}${name}:${value}次`
        }
        return res;
      }
    },
    series: [
      {
        type: 'pie',
        roseType: 'radius',
        radius: ['35%', '75%'],
        center: ['35%', '60%'],
        label: {
          position: 'inside',
          formatter(item:any) {
            if (item.name === '') {
              return '';
            }
            return `${item.value}`;
          },
          textStyle: {
            fontSize: 24,
            color: '#ffffff'
          }
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color(params:any) {
              return colorList[parseInt(String(params.dataIndex / 2))].color1;
            }
          }
        },
        z: 3,
        data: optionData,
      },
      {
        type: 'pie',
        roseType: 'radius',
        radius: ['35%', '77%'],
        center: ['35%', '60%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color(params:any) {
              return colorList[parseInt(String(params.dataIndex / 2))].color2;
            }
          }
        },
        z: 2,
        data: optionData,
      }
    ]
  };

  chart.setOption(option,true);
}

export function wlaqzelsFn() {
  const chart = echarts.init(
    document.getElementById("chart-wlaqzels") as HTMLElement
  );
  const option = {
    legend: {
      show: false,
      data: ["市", "县", "所"],
    },
    series: [
      {
        name: "Funnel",
        type: "funnel",
        left: "0",
        top: 10, // 调整 top 属性的值
        bottom: 60, // 调整 bottom 属性的值
        width: "55%",
        min: 0,
        max: 100,
        minSize: "0%",
        maxSize: "100%",
        sort: "ascending", // 调整 sort 属性为 'ascending'
        gap: 0,
        itemStyle: {
          borderColor: "#ffffff00",
          borderWidth: 1,
        },
        label: {
          show: false,
        },
        data: [
          {
            value: 20,
            valueText: 1,
            name: "市",
            itemStyle: { color: "#FFCA7A" },
          },
          {
            value: 40,
            valueText: 27,
            name: "县",
            itemStyle: { color: "#36DC88" },
          },
          {
            value: 60,
            valueText: 976,
            name: "所",
            itemStyle: { color: "#4C9DFF" },
          },
        ],
      },
    ],
  };
  chart.setOption(option);
}

export async function mbzjfubFn() {
  const colorList = ['rgba(69, 244, 245,  0.9)', 'rgba(7, 166, 255,  0.9)', 'rgba(255, 208, 118,  0.9)','rgba(109, 148, 198, 0.9)', 'rgba(255, 255, 255,  0.9)']
  let data:any = []

  const res = await axios.post("http://localhost:8080/x2");
  const result:any = res.data.data
  result.dtos.forEach((item:any)=>{
    data.push({
      name: item.name,
      value: item.value
    })
  })
  const chart = echarts.init(document.getElementById("mbzjfub") as HTMLElement);
  const serData = data.map((dItem:any, index:number) => {
    return {
      ...dItem,
      value: Number(dItem.value),
      itemStyle: {
        color: colorList[index]
      },
    }
  })
  // 传入数据生成 option
  const option = getPie3D(serData,0.7, colorList);
  chart.setOption(option);
  return result;
}

// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio:any, endRatio:any, isSelected:any, isHovered:any, k:any, h:any) {
  // 计算
  let midRatio = (startRatio + endRatio) / 2;

  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;

  // 如果只有一个扇形，则不实现选中效果。
  // if (startRatio === 0 && endRatio === 1) {
  //     isSelected = false;
  // }
  isSelected = false;
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;

  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;

  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x: function (u:any, v:any) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y: function (u:any, v:any) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z: function (u:any, v:any) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
}

// 生成模拟 3D 饼图的配置项
function getPie3D(pieData:any, internalDiameterRatio:any, colorList:any[]) {
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let linesSeries = []; // line3D模拟label指示线
  let k =
      typeof internalDiameterRatio !== 'undefined'
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;

  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;

    let seriesItem:any = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: 1 / 10,
      },
    };

    if (typeof pieData[i].itemStyle != 'undefined') {
      let itemStyle:any = {};

      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
      typeof pieData[i].itemStyle.opacity != 'undefined'
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;

      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;

    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
    );

    startValue = endValue;

    legendData.push(series[i].name);
  }

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: '#E1E8EC',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -0.5 : -5;
      },
    },
  });

  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.5,
      color: 'rgba(101, 153, 164, 0.24)',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -5 : -7;
      },
    },
  });
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',

    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: '#E1E8EC',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 20,
      },
      x: function (u:any, v:any) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
      },
      y: function (u:any, v:any) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
      },
      z: function (u:any, v:any) {
        return Math.cos(v) > 0 ? -7 : -7;
      },
    },
  });

  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    // animation: false,
    // animation: false,
    tooltip: {
      textStyle:{
        fontSize: 34
      },
      formatter: (params:any) => {
        if (params.seriesName !== 'mouseoutSeries') {
          return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
        }
      }
    },
    legend: {
      // icon: 'none',
      show: true,
      type:'scroll',
      width: '100%',
      orient: 'horizontal',
      data: pieData.map((dItem:any,dIndex:any) => {
        return {
          ...dItem,
          textStyle: {
            rich: {
              iconName: {
                width: 4,
                height: 16,
                borderRadius: 5,
                backgroundColor: colorList[dIndex],
              },
              percent: {
                color: colorList[dIndex],
              },
            }
          },
        }
      }),
      right: 'center',
      top: '5%',
      itemGap: 30,
      itemWidth: 12,
      itemHeight: 12,
      selectedMode: false, // 关闭图例选择
      textStyle: {
        color: '#fff',
        fontSize: 28,
        rich: {
          // iconName: {
          //   width: 5,
          //   height: 8,
          //   backgroundColor: '#ff00ff'
          // },
          name: {
            color: '#FFF',
            fontSize: 34,
            padding: [0, 0, 0, 0],
          },
          value: {
            color: '#2BDFD4',
            fontFamily: 'PangMenZhengDao',
            fontSize: 34,
            width: 80,
            padding: [0, 0, 0, 10]
          },
          percent: {
            color: '#2BDFD4',
            fontFamily: 'PangMenZhengDao',
            fontSize: 34,
            padding: [0, 0, 0, 10]
          },
          unit: {
            color: '#ACDCE4',
            fontSize: 34,
            padding: [0, 20, 0, 5]
          }
        }
      },
      formatter: (name:any) => {
        let obj = pieData.find((item:any) => item.name === name);
        let datas = pieData;
        let total = 0;
        let target = obj.value
        for (let i = 0; i < datas.length; i++) {
          total += Number(datas[i].value);
        }
        const arr = [
          `{name|${name}}{percent|${((target / total) * 100).toFixed(0)}}{unit|%}`
        ];
        return arr.join('')
      }
    },
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    grid3D: {
      viewControl: {
        autoRotate: true, // 自动旋转
        projection: 'perspective', // 先设置为这个perspective
        distance: 150
      },
      left: 'center',
      width: '100%',
      top: '3%',
      show: false,
      boxHeight: 80,
    },
    series: series,
  };
  return option;
}
